<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Сетки</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/18.8 bootstrap-grid.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">
  <link type="image/x-icon" rel="shortcut icon" href="image/Vector (4).svg">
  <link type="Image/x-icon" rel="icon" href="image/Vector (4).svg">
</head>

<body>

  <header class="header">
    <div class="container header__content flex">
      <a href="#" class="header__logo">
        <svg class="header__img" width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_51_168)">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M13.123 14.968C13.123 18.266 10.506 20.658 6.348 20.658C5.15335 20.6242 3.97725 20.3539 2.88767 19.8628C1.79808 19.3717 0.816623 18.6696 0 17.797L1.39 16.255C2.692 17.498 4.223 18.706 6.32 18.706C8.65 18.706 11.161 17.396 11.161 15.042C11.161 13.087 9.613 11.812 6.359 10.807C2.651 9.67 0.77 8.128 0.77 5.227C0.768 2.356 3.188 0 6.64 0C9.217 0 10.83 1.102 12.399 2.51L11.032 4.033C9.656 2.81 8.345 1.981 6.736 1.981C4.74 1.98 2.77 3.272 2.77 5.13C2.77 6.814 3.734 7.887 7.14 8.933C10.26 9.897 13.123 11.391 13.123 14.966V14.968ZM29.948 1.898C29.948 2.802 30.678 3.536 31.579 3.536C32.012 3.536 32.427 3.363 32.733 3.056C32.9607 2.82686 33.1157 2.53556 33.1785 2.21867C33.2412 1.90178 33.209 1.5734 33.0859 1.27475C32.9627 0.976093 32.7541 0.720464 32.4862 0.539936C32.2183 0.359408 31.903 0.262022 31.58 0.26C30.679 0.26 29.949 0.993 29.949 1.898H29.948ZM50.328 19.676C50.328 19.676 51.538 20.663 55.572 20.663L55.57 20.662C59.552 20.662 62.784 17.74 62.784 13.747C62.784 9.755 59.554 6.844 55.572 6.844C54.442 6.814 53.322 7.044 52.294 7.517V0.599H50.328V19.676ZM65.087 13.767C65.087 17.761 68.313 21 72.294 21C76.275 21 79.503 17.762 79.504 13.768C79.504 9.774 76.276 6.536 72.295 6.536C68.315 6.536 65.087 9.773 65.087 13.767ZM91.433 20.337H94L88.324 13.553L93.617 7.191H91.065L87.045 12.023L83.004 7.191H80.437L85.768 13.561L80.132 20.337H82.683L87.047 15.092L91.433 20.337ZM72.313 8.49C71.2737 8.49068 70.2579 8.79991 69.3945 9.3785C68.531 9.95708 67.8588 10.779 67.463 11.74C67.0655 12.7023 66.9613 13.7606 67.1636 14.7819C67.3659 15.8032 67.8657 16.7419 68.6 17.48C69.3326 18.2162 70.2677 18.7179 71.2863 18.9213C72.3048 19.1246 73.3608 19.0204 74.32 18.622C75.2803 18.2216 76.1004 17.5458 76.6771 16.6798C77.2537 15.8138 77.5609 14.7964 77.56 13.756C77.56 10.848 75.21 8.49 72.312 8.49H72.313ZM55.583 8.823C54.4076 8.83931 53.2646 9.21055 52.304 9.888V18.033C53.3222 18.5296 54.451 18.7562 55.582 18.691C58.478 18.691 60.827 16.661 60.827 13.757C60.827 10.853 58.476 8.822 55.58 8.822H55.582L55.583 8.823ZM45.748 0.6H43.781V20.334H45.748V0.6ZM37.231 0.6H39.198V20.334H37.231V0.6ZM18.209 13.44L18.203 13.434L18.209 13.428V13.44ZM18.209 20.334V13.44L25.082 20.337H27.863L20.983 13.434L27.212 7.181H24.43L18.208 13.428V0.6H16.241V20.334H18.208H18.209ZM30.666 20.337H32.632V7.181H30.666V20.337Z" fill="white"/>
          </g>
          <defs>
          <clipPath id="clip0_51_168">
          <rect width="94" height="21" fill="white"/>
          </clipPath>
          </defs>
        </svg>
      </a>
      <button aria-label="Бургер меню" class="btn-reset burger">
        <span class="burger__line"></span>
        <span class="burger__line"></span>
        <span class="burger__line"></span>
      </button>
      <nav class="header__nav">
        <ul class="header__list list-reset flex">
          <li class="header__item">
            <a href="#" class="header__link">
              Главная
            </a>
          </li>
          <li class="header__item">
            <a href="#about" class="header__link">
              О&nbsp;нас
            </a>
          </li>
          <li class="header__item">
            <a href="#teacher" class="header__link">
              Преподаватели
            </a>
          </li>
          <li class="header__item">
            <a href="#course" class="header__link">
              Курсы
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section id="#" class="home section-offset">
      <div class="home__container container">
        <div class="row home__content">
          <div class="col-12 col-sm-10 col-md-7 col-lg-6 home__text">
            <h1 class="home__title section-title">
              Курсы&nbsp;3D моделирования
            </h1>
            <p class="home__descr section-descr">
              Следует отметить, что существующая теория способствует повышению качества благоприятных перспектив. Не&nbsp;следует, однако, забывать.
            </p>
            <button class="home__btn btn btn-reset">
              Выбрать курс
            </button>
          </div>
        </div>
      </div>
    </section>
    <section id="about" class="about section-offset">
      <div class="about__container container">
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-9">
            <div class="about__content flex">
              <img class="about__img" src="./image/aboutContent.png" alt="Преимущества">
              <div class="about__top">
                <h2 class="about__title section-title">
                  Преимущества обучения в&nbsp;skillbox
                </h2>
                <p class="about__descr section-descr">
                  Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших компаний, которые представляют
                  собой яркий пример континентально-европейского типа политической культуры, будут рассмотрены&nbsp;исключительно
                  в&nbsp;разрезе маркетинговых предпосылок.
                </p>
              </div>
            </div>
          </div>
        </div>
        <ul class="row list-reset">
          <li class="col-12 col-sm-4 col-md-4 col-lg-4">
            <div class="about__bottom flex">
              <picture class="about__picture">
                <source srcset="./image/eye.svg" media="(max-width: 1024px)">
                <img src="./image/eye.svg" class="about__card" alt="eye">
              </picture>
              <p class="about__text section-descr">
                Результат вашего обучения является самым важным для нас приоритетом
              </p>
            </div>
          </li>
          <li class="col-12 col-sm-4 col-md-4 col-lg-4">
            <div class="about__bottom flex">
              <picture class="about__picture about__exception">
                <source srcset="./image/fingers.svg" media="(max-width: 1024px)">
                <img src="./image/fingers.svg" class="about__card" alt="hellow">
              </picture>
              <p class="about__text section-descr">
                Лично познакомитесь с&nbsp;одним из&nbsp;своих будущих преподавателей
              </p>
            </div>
          </li>
          <li class="col-12 col-sm-4 col-md-4 col-lg-4">
            <div class="about__bottom flex">
              <picture class="about__picture">
                <source srcset="./image/megaphone.svg" media="(max-width: 1024px)">
                <img src="./image/megaphone.svg" class="about__card" alt="importance">
              </picture>
              <p class="about__text section-descr">
                Значимость этих проблем очевидна, поэтому стоит всегда быть внимательным
              </p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section id="teacher" class="teacher section-offset">
      <div class="teacher__container container">
        <h2 class="teacher__title section-title">
          Преподаватели курсов
        </h2>
        <ul class="row list-reset">
          <li class="col-12 col-sm-6 col-md-6 col-lg-3">
            <div class="teacher__block">
              <picture class="teacher__picture">
                <source srcset="./image/petrovSmall.jpg" media="(max-width: 575px)">
                <source srcset="./image/petrovMedium.jpg" media="(max-width: 576px)">
                <source srcset="./image/petrovMax.jpg" media="(max-width: 1024px)">
                <img src="./image/petrovMin.jpg" class="teacher__img" alt="Владимир Петров">
              </picture>
              <h3 class="teacher__content__title section-title">
                Владимир Петров
              </h3>
              <p class="teacher__content__descr section-descr">
                Лишь непосредственные участники технического прогресса неоднозначны и&nbsp;будут в&nbsp;равной степени предоставлены сами себе.
              </p>
            </div>
          </li>
          <li class="col-12 col-sm-6 col-md-6 col-lg-3">
            <div class="teacher__block">
              <picture class="teacher__picture">
                <source srcset="./image/sergeevSmall.jpg" media="(max-width: 575px)">
                <source srcset="./image/sergeevMedium.jpg" media="(max-width: 576px)">
                <source srcset="./image/sergeevMax.jpg" media="(max-width: 1024px)">
                <img src="./image/sergeevMin.jpg" class="teacher__img" alt="Денис Сергеев">
              </picture>
              <h3 class="teacher__content__title section-title">
                Денис Сергеев
              </h3>
              <p class="teacher__content__descr section-descr">
                Безусловно, разбавленное изрядной долей эмпатии, рациональное мышление.
              </p>
            </div>
          </li>
          <li class="col-12 col-sm-6 col-md-6 col-lg-3">
            <div class="teacher__block">
              <picture class="teacher__picture">
                <source srcset="./image/andreevSmall.jpg" media="(max-width: 575px)">
                <source srcset="./image/andreevMedium.jpg" media="(max-width: 576px)">
                <source srcset="./image/andreevMax.jpg" media="(max-width: 1024px)">
                <img src="./image/andreevMin.jpg" class="teacher__img" alt="Михаил Андреев">
              </picture>
              <h3 class="teacher__content__title section-title">
                Михаил Андреев
              </h3>
              <p class="teacher__content__descr section-descr">
                Ясность нашей позиции очевидна: высокое качество позиционных исследований напрямую зависит от&nbsp;вывода.
              </p>
            </div>
          </li>
          <li class="col-12 col-sm-6 col-md-6 col-lg-3">
            <div class="teacher__block">
              <picture class="teacher__picture">
                <source srcset="./image/dmitrievSmall.jpg" media="(max-width: 575px)">
                <source srcset="./image/dmitrievMedium.jpg" media="(max-width: 576px)">
                <source srcset="./image/dmitrievMax.jpg" media="(max-width: 1024px)">
                <img src="./image/dmitrievMin.jpg" class="teacher__img" alt="Константин Дмитриев">
              </picture>
              <h3 class="teacher__content__title section-title">
                Константин Дмитриев
              </h3>
              <p class="teacher__content__descr section-descr">
                Мы&nbsp;вынуждены отталкиваться от&nbsp;того, что существующая теория, в&nbsp;своём классическом представлении.
              </p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section id="course" class="course section-offset">
      <div class="course__container container">
        <h2 class="course__title section-title">
          Курсы
        </h2>
        <ul class="row list-reset course__distance">
          <li class="col-12 col-sm-6 col-md-6 col-lg-6 course__problem">
            <div class="course__back flex">
              <div class="course__img">
                <picture class="course__picture">
                  <source srcset="./image/course4dMin.jpg" media="(max-width: 575px)">
                  <source srcset="./image/course4dSmall.jpg" media="(max-width: 576px)">
                  <source srcset="./image/course4dMedium.jpg" media="(max-width: 768px)">
                  <img src="./image/course4dMax.jpg" alt="4d&nbsp;для начинающих">
                </picture>
                <div class="clock flex">
                  <svg class="clock__img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_51_54)">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="white"/>
                    <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_51_54">
                    <rect width="24" height="24" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                  <p class="clock__text">
                    60&nbsp;часов
                  </p>
                </div>
              </div>
              <div class="course__content">
                <div class="course__content-text">
                  <h3 class="course__content-title section-title">
                    Cinema 4d&nbsp;для начинающих
                  </h3>
                  <p class="course__descr section-descr">
                    Учитывая ключевые сценарии поведения, базовый вектор развития напрямую зависит от&nbsp;системы массового участия. Следует отметить, что сложившаяся структура организации напрямую зависит&nbsp; от стандартных подходов.
                  </p>
                </div>
                <button class="course__btn btn section-btn">
                  Подробнее
                </button>
              </div>
            </div>
          </li>
          <li class="col-12 col-sm-6 col-md-6 col-lg-6 course__problem">
            <div class="course__back flex">
              <div class="course__img">
                <picture class="course__picture">
                  <source srcset="./image/courseBlenderMin.jpg" media="(max-width: 575px)">
                  <source srcset="./image/courseBlenderSmall.jpg" media="(max-width: 576px)">
                  <source srcset="./image/courseBlenderMedium.jpg" media="(max-width: 768px)">
                  <img src="./image/courseBlenderMax.jpg" alt="Blender: продвинутый уровень">
                </picture>
                <div class="clock flex">
                  <svg class="clock__img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_51_54)">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="white"/>
                    <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_51_54">
                    <rect width="24" height="24" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                  <p class="clock__text">
                    40&nbsp;часов
                  </p>
                </div>
              </div>
              <div class="course__content">
                <div class="course__content-text">
                  <h3 class="course__content-title section-title">
                    Blender: продвинутый уровень
                  </h3>
                  <p class="course__descr section-descr">
                    Но&nbsp;убеждённость некоторых оппонентов в&nbsp;значительной степени обусловливает важность форм воздействия. Внезапно, тщательные исследования конкурентов представлены.
                  </p>
                </div>
                <button class="course__btn btn section-btn">
                  Подробнее
                </button>
              </div>
            </div>
          </li>
        </ul>
        <ul class="row list-reset">
          <li class="col-12 col-sm-6 col-md-6 col-lg-6 course__problem">
            <div class="course__back flex">
              <div class="course__img">
                <picture class="course__picture">
                  <source srcset="./image/course3dsMin.jpg" media="(max-width: 575px)">
                  <source srcset="./image/course3dsSmall.jpg" media="(max-width: 576px)">
                  <source srcset="./image/course3dsMedium.jpg" media="(max-width: 768px)">
                  <img src="./image/course3dsMax.jpg" alt="Визуализация в&nbsp;3ds Max">
                </picture>
                <div class="clock flex">
                  <svg class="clock__img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_51_54)">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="white"/>
                    <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_51_54">
                    <rect width="24" height="24" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                  <p class="clock__text">
                    40&nbsp;часов
                  </p>
                </div>
              </div>
              <div class="course__content">
                <div class="course__content-text">
                  <h3 class="course__content-title section-title">
                    Визуализация в 3ds&nbsp; Max
                  </h3>
                  <p class="course__descr section-descr">
                    Повседневная практика показывает, что сложившаяся структура организации обеспечивает актуальность кластеризации усилий.
                  </p>
                </div>
                <button class="course__btn btn section-btn">
                  Подробнее
                </button>
              </div>
            </div>
          </li>
          <li class="col-12 col-sm-6 col-md-6 col-lg-6">
            <div class="course__back flex">
              <div class="course__img">
                <picture class="course__picture">
                  <source srcset="./image/courseZBMin.jpg" media="(max-width: 575px)">
                  <source srcset="./image/courseZBSmall.jpg" media="(max-width: 576px)">
                  <source srcset="./image/courseZBMedium.jpg" media="(max-width: 768px)">
                  <img src="./image/courseZBMax.jpg" alt="Скульптинг в&nbsp;ZBrush">
                </picture>
                <div class="clock flex">
                  <svg class="clock__img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_51_54)">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="white"/>
                    <path d="M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_51_54">
                    <rect width="24" height="24" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                  <p class="clock__text">
                    80&nbsp;часов
                  </p>
                </div>
              </div>
              <div class="course__content">
                <div class="course__content-text">
                  <h3 class="course__content-title section-title">
                    Скульптинг в&nbsp;ZBrush
                  </h3>
                  <p class="course__descr section-descr">
                    Разнообразный и&nbsp;богатый опыт говорит нам, что граница обучения кадров требует определения и&nbsp;уточнения прогресса профессионального сообщества! В&nbsp;частности, постоянный количественный рост и&nbsp;сфера нашей активности.
                  </p>
                </div>
                <button class="course__btn btn section-btn">
                  Подробнее
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </main>

  <footer class="footer">
    <section class="footer__up section-offset">
      <div class="footer__top container">
        <ul class="footer__list flex list-reset">
          <li class="footer__item">
            <a href="#" class="footer__link" target="_blank">
              <svg class="footer__fb" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_51_12)">
                <path d="M15.402 21V14.034H17.735L18.084 11.326H15.402V9.598C15.402 8.814 15.62 8.279 16.744 8.279H18.178V5.857C17.4838 5.78334 16.7861 5.74762 16.088 5.75C14.021 5.75 12.606 7.012 12.606 9.33V11.326H10.268V14.034H12.606V21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H15.402Z"/>
                </g>
                <defs>
                <clipPath id="clip0_51_12">
                <rect width="24" height="24"/>
                </clipPath>
                </defs>
              </svg>
            </a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link" target="_blank">
              <svg class="footer__tw" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_51_15)">
                <path d="M22.1621 5.65593C21.3986 5.99362 20.589 6.2154 19.7601 6.31393C20.6338 5.79136 21.2878 4.96894 21.6001 3.99993C20.7801 4.48793 19.8811 4.82993 18.9441 5.01493C18.3147 4.34151 17.4804 3.89489 16.571 3.74451C15.6616 3.59413 14.728 3.74842 13.9153 4.18338C13.1026 4.61834 12.4564 5.30961 12.0772 6.14972C11.6979 6.98983 11.6068 7.93171 11.8181 8.82893C10.1552 8.74558 8.52838 8.31345 7.04334 7.56059C5.55829 6.80773 4.24818 5.75097 3.19805 4.45893C2.82634 5.09738 2.63101 5.82315 2.63205 6.56193C2.63205 8.01193 3.37005 9.29293 4.49205 10.0429C3.82806 10.022 3.17869 9.84271 2.59805 9.51993V9.57193C2.59825 10.5376 2.93242 11.4735 3.5439 12.221C4.15538 12.9684 5.00653 13.4814 5.95305 13.6729C5.33667 13.84 4.69036 13.8646 4.06305 13.7449C4.32992 14.5762 4.85006 15.3031 5.55064 15.824C6.25123 16.3449 7.09718 16.6337 7.97005 16.6499C7.10253 17.3313 6.10923 17.8349 5.04693 18.1321C3.98464 18.4293 2.87418 18.5142 1.77905 18.3819C3.69075 19.6114 5.91615 20.264 8.18905 20.2619C15.8821 20.2619 20.0891 13.8889 20.0891 8.36193C20.0891 8.18193 20.0841 7.99993 20.0761 7.82193C20.8949 7.23009 21.6017 6.49695 22.1631 5.65693L22.1621 5.65593Z"/>
                </g>
                <defs>
                <clipPath id="clip0_51_15">
                <rect width="24" height="24"/>
                </clipPath>
                </defs>
              </svg>
            </a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link" target="_blank">
              <svg class="footer__inst" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_51_18)">
                <path d="M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z"/>
                </g>
                <defs>
                <clipPath id="clip0_51_18">
                <rect width="24" height="24"/>
                </clipPath>
                </defs>
              </svg>
            </a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link" target="_blank">
              <svg class="footer__you" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_51_21)">
                <path d="M21.543 6.498C22 8.28 22 12 22 12C22 12 22 15.72 21.543 17.502C21.289 18.487 20.546 19.262 19.605 19.524C17.896 20 12 20 12 20C12 20 6.107 20 4.395 19.524C3.45 19.258 2.708 18.484 2.457 17.502C2 15.72 2 12 2 12C2 12 2 8.28 2.457 6.498C2.711 5.513 3.454 4.738 4.395 4.476C6.107 4 12 4 12 4C12 4 17.896 4 19.605 4.476C20.55 4.742 21.292 5.516 21.543 6.498ZM10 15.5L16 12L10 8.5V15.5Z"/>
                </g>
                <defs>
                <clipPath id="clip0_51_21">
                <rect width="24" height="24"/>
                </clipPath>
                </defs>
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <div class="footer__bottom container">
      <span class="footer__descr">
        SKILLBOX <sup class="reg">&reg;</sup> 2021
      </span>
    </div>
  </footer>

  <script src="index.js"></script>

</body>

</html>
